<script setup>
import {ref, onMounted} from 'vue'
import {pageProductApi,agreeProductApi,disagreeProductApi} from "@/api/todo/todo"
import { ElMessage, ElMessageBox } from 'element-plus'
const tableData = ref({})
// 表单状态
const filterState = ref(true)
// 表单数据
const isExpand = ref(false)
const formData = ref({
  page: 1,
  size: 10,
  name: '',
  applicant: '',
  sdate: '',
  edate: ''
})
const dateRange = ref([])//el-date-picker组件保存是数组
const showSearch = ref(true);
onMounted(() => {
  loadData()
})
//请求 查询接口
const loadData = async () => {
  console.log(11111)
  console.log(formData.value)
  if (dateRange.value.length) {
    //赋值
    formData.value.sdate = dateRange.value[0]
    formData.value.edate = dateRange.value[1]
  }
  const r = await pageProductApi(formData.value);
  tableData.value = r.data;
  console.log(tableData.value)
}

/** 重置按钮操作 */
function resetQuery() {
  formData.value.name = undefined
  formData.value.applicant = undefined
  formData.value.sdate = undefined
  formData.value.edate = undefined
  dateRange.value = [];
  loadData()
}
// 分页
const onSizeChange = (val) => {
  formData.value.size = val;
  loadData()
}
const onCurrentChange = (val) => {
  formData.value.page = val;
  loadData()
}


// 批量选择
let objs = ref([])
const onSelectionChange = (val) => {
  objs.value = val
}

const onDisagreeBatch = () => {
    ElMessageBox.confirm('确定驳回这些请求吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        //请求接口
        if (ids.value.length > 0) {

            let ids_result = ids.value.map(item => item.id);
            let r = await disagreeProductApi({ id: [ids_result] })
            if (r.code == 200) {
                ElMessage({ type: 'success', message: '驳回成功' })
            } else {
                ElMessage({ type: 'info', message: r.data })
            }
        }
    }).catch(() => {
        ElMessage({
            type: 'info', message: '驳回失败'
        })
    }).finally(() => {
        loadData()
    })
}

const onAgreeBatch = () => {
    ElMessageBox.confirm('确定通过这些请求吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        //请求接口
        if (ids.value.length > 0) {

            let ids_result = ids.value.map(item => item.id);
            let r = await agreeProductApi({ id: [ids_result] })
            if (r.code == 200) {
                ElMessage({ type: 'success', message: '通过成功' })
            } else {
                ElMessage({ type: 'info', message: r.data })
            }
        }
    }).catch(() => {
        ElMessage({
            type: 'info', message: '通过失败'
        })
    }).finally(() => {
        loadData()
    })
}

const onAgree = async (row) => {
  const r = await agreeProductApi({id: row.id});
  if (r.code == 0) {
    ElMessage.success("通过审核！")
    loadData()
  } else {
    ElMessage.error(r.data)
  }
}

// 驳回申请
const onDisagree = (row) => {
    ElMessageBox.confirm('确定驳回该条申请吗?', '温馨提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        //请求接口 删除数据
        let r = await disagreeProductApi({ id: [row.id] })
        if (r.code == 200) {
            ElMessage({ type: 'success', message: '驳回成功' })
        } else {
            ElMessage({ type: 'info', message: r.data })
        }
    }).catch(() => {
        ElMessage({
            type: 'info', message: '驳回失败'
        })
    }).finally(() => {
        loadData()
    })
}
</script>

<template>
  <div class="app-container">
    <!-- 筛选 -->
    <div v-if="filterState">
            <el-form :inline="true" :model="formData" label-width="68px">
              <el-form-item label="设备名称">
                <el-input placeholder="请输入设备名称" v-model="formData.name" style="width: 240px"/>
              </el-form-item>
              <el-form-item label="申请人">
                <el-input placeholder="请输入申请人姓名" v-model="formData.applicant" style="width: 240px"/>
              </el-form-item>
                <el-form-item label="活动日期" v-show="isExpand">
                    <el-date-picker v-model="dateRange" type="daterange" value-format="YYYY-MM-DD"
                        format="YYYY-MM-DD" range-separator="到" start-placeholder="开始日期"
                        end-placeholder="结束日期" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loadData"> <span class="iconfont icon-sousuo"></span>搜索
                    </el-button>
                    <el-button type="default" @click="resetQuery"> 重置 </el-button>
                    <el-button type="primary" link @click="isExpand = !isExpand">
                        {{ isExpand ? '收起' : '展开' }}
                        <el-icon>
                            <ArrowUp v-if="isExpand" />
                            <ArrowDown v-else />
                        </el-icon>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <!-- 筛选 -->
        <!-- 内容 -->
        <!-- 按钮组 -->
        <el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
                <el-button type="primary" :disabled="!objs.length" @click="onAgreeBatch">
                  <span class="iconfont icon-jiahao"></span>批量通过
                </el-button>
                <el-button type="danger" :disabled="!objs.length" @click="onDisagreeBatch">
                  <span class="iconfont icon-shanchu"></span>批量驳回
                </el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="loadData"></right-toolbar>
        </el-row>
    <!-- 表格 -->

    <el-table :data="tableData.data" :border="true" @selection-change="onSelectionChange">
      <el-table-column type="selection" align="center" fixed="left"></el-table-column>
      <el-table-column align="center" label="序号" prop="id"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请批次" prop="batchName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请物品" prop="productsName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请数量" prop="amount"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请金额" prop="price"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请人员" prop="applicant"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请原因" prop="reason"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="申请时间" prop="createTime"/>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template #default="scope">
              <el-tooltip content="通过" placement="top">
                <el-button link type="primary" icon="CircleCheck" @click="onAgree(scoped.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="驳回" placement="top">
                <el-button link type="primary" icon="Delete" @click="onDisagree(scoped.row)"></el-button>
              </el-tooltip>
            </template>
         </el-table-column>
    </el-table>
    <!-- 表格 -->
    <!-- 分页 -->
    <pagination
         v-show="tableData.total"
         :total="tableData.total"
         v-model:current-page="formData.pagenum"
         v-model:page-size="formData.pagesize"
         @pagination="loadData"
         @size-change="onSizeChange"
         @current-change="onCurrentChange"
      />

    <!-- 分页 -->
    <!-- 内容 -->
  </div>
</template>

